/*
 * @Description: 支付结果页
 * @Author: ziwei.ma
 * @Date: 2019-10-30 16:03:36
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-31 21:22:05
 */

<template>
  <div>
    <buySuccess
      v-if="statusStr==='3'"
      :hasBackTrack="hasBackTrack"
      :direction="direction"
    ></buySuccess>
    <buyFailure v-else-if="statusStr==='-1'"></buyFailure>
    <inQuery
      v-else-if="statusStr==='1'||statusStr==='2'"
      :failsMsg="failsMsg"
    ></inQuery>
  </div>
</template>

<script>
import { getPurchaseResult, payOrder } from '../../api/api'
import buyFailure from '../../components/paymentResult/buyFailure'
import buySuccess from '../../components/paymentResult/buySuccess'
import inQuery from '../../components/paymentResult/inQuery'
// const PAYMENT_FAILED = '-1' // 支付失败
// const PAYMENT_SUCCESS = '3' // 支付成功
const INQUERY = '1' // 查询中
const INQUERY_FAILS = '2' // 查询失败
export default {
  components: {
    'buyFailure': buyFailure,
    'buySuccess': buySuccess,
    'inQuery': inQuery
  },
  data() {
    return {
      orderNO: '',
      index: '',
      statusStr: '',
      failsMsg: '',
      hasBackTrack: '', // 是否有返程(1.有 0.无)
      direction: 1// 线路方向1、上行，2.下行
    }
  },
  mounted() {
    this.direction = this.$route.query.direction
    this.getResult()
  },
  methods: {
    getResult() { // 查询状态、再次查询也点这个
      this.orderNO = this.$route.query.ORDER_NO
      // this.orderNO = 2019103184132107
      // console.warn('this.$route.query.ORDER_NO:', this.$route.query.ORDER_NO)
      getPurchaseResult(this.orderNO).then(res => {
        console.warn('res.state', res.state)
        this.statusStr = res.state
        this.hasBackTrack = res.hasBackTrack
        if (res.state === INQUERY) {
          this.failsMsg = '支付结果查询中...'
        } else if (res.state === INQUERY_FAILS) {
          this.failsMsg = '购票结果查询失败'
        }
      }).catch(err => {
        this.index++
        if (this.index <= 5) {
          setTimeout(() => {
            // 如果查询失败则调用自身再次查询，查询6次，间隔5000毫秒
            this.getResult()
          }, 5000)
        } else {
          this.failsMsg = '购票结果查询失败'
        }
        this.showToast(err)
      })
    },
    // 再次支付
    payAgain() {
      console.warn('this.orderNO', this.orderNO)
      payOrder(this.orderNO).then(res => {
        console.warn('res===>', res)
        let obj = this.$getUrlParams('?' + res.PAYMENT_STR) // 解析支付串
        console.log(obj)
        // 拉起微信支付
        this.$WX.then(WX => {
          WX.chooseWXPay(obj.timeStamp, obj.nonceStr, obj.package, obj.signType, obj.paySign, () => {
            this.$router.push({ name: 'paymentResult', query: { ORDER_NO: res.ORDER_NO } })
          }, err => {
            console.dir(err)
            this.$toastMsg('支付失败')
          }, () => {
          })
        }).catch(err => {
          console.dir(err)
          console.log('调用支付接口失败')
        })
      })
    }
  }
}
</script>

<style scoped>
.result_wrapper {
  height: 100%;
  width: 100%;
}
.result_wrapper > img {
  width: 200px;
  height: 200px;
  margin: 64px;
}
.result_wrapper > div > span {
  color: #666666;
  margin: 16px 80px 0;
  text-align: center;
}
.btn_wrapper {
  line-height: 72px;
  text-align: center;
  position: absolute;
  bottom: 58px;
}
.FristBtn {
  width: 686px;
  height: 72px;
  background: #027aff;
  border-radius: 36px;
  color: #ffffff;
}
.SecondBtn {
  margin: 32px 0 50px;
  width: 686px;
  height: 72px;
  border-radius: 36px;
  border: 1px solid #027aff; /*no*/
  color: #027aff;
}
</style>
